<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{title.login}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->

		<link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>	
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script th:if="${session.session_login_failed_time > 3}" th:inline="javascript">/*<![CDATA[*/
        document.write('<script src="'+ /*[[@{/js/vendor/jquery.motionCaptcha.0.2.js}]]*/ 'js/vendor/jquery.motionCaptcha.0.2.js'
        		+'"><\/script><link rel="stylesheet" href="' + /*[[@{/css/jquery.motionCaptcha.0.2.css}]]*/'css/jquery.motionCaptcha.0.2.css' 
        		+ '"/>')
        $(function(){
        	$('#login-form').motionCaptcha({
        		errorMsg: /*[[#{loginpage.js.captcha.errorMsg}]]*/'Please try again'
        		, successMsg: /*[[#{loginpage.js.captcha.successMsg}]]*/'Captcha passed!'
        		, noCanvasMsg: /*[[#{loginpage.js.captcha.noCanvasMsg}]]*/'Your browser doesn\'t support <canvas> - try Chrome, FF4, Safari or IE9'
        		, label: /*[[#{loginpage.js.captcha.label}]]*/'Please draw the shape in the box to submit the form:'
        	});
        });
        /*]]>*/</script>
         <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        
        <div class="container">
        	<div class="row">
        		<div class="eightcol">
        			<h1 th:text="#{loginpage.header}"></h1>
        			<div class="threecol top-border">
       					<h4 th:text="#{loginpage.header.help.title}"></h4>
       					<ul class="helper">
       						<li>
       							<a href="#" th:href="@{/c/a/loginFaq}" th:text="#{loginpage.header.help.commonqa}"></a>
       						</li>
       					</ul>
       				</div>
       				<div class="ninecol last top-border">
       					<h3 th:text="#{loginpage.login.title}"></h3>
       					<div th:if="${msg}" class="error-msg" th:text="#{loginpage.login.errmsg}"></div>
       					<div class="form-reg">
       						<form id="login-form" th:action="${session.session_login_failed_time > 3}?'#':@{/login}" method="post">
	       						<ul class="top-border-dot">
	       							<li class="sixcol">
	       								<label><strong th:text="#{loginpage.login.username}"></strong><span class="required">*</span></label>
	       								<input name="username" />
	       							</li>
	       							<li class="sixcol last">
	       								<label><strong th:text="#{loginpage.login.password}"></strong><span class="required">*</span></label>
	       								<input name="password" type="password"/>
	       							</li>
	       							<li class="sixcol">
	       								<label><input type="checkbox" name="rememberMe" class="onecol"/><a th:text="#{loginpage.login.rememberme}"></a></label>
	       							</li>
	       							<li class="sixcol last">
	       								<a href="#" th:href="@{/forgetPassword.html}" th:text="#{loginpage.login.fotgetpassword}"></a>
	       							</li>
	       							<li class="twelvecol" th:if="${session.session_login_failed_time > 3}">
	       								<div id="mc">
										    <p th:text="#{loginpage.js.captcha.label}">Please draw the shape in the box to submit the form:</p>
										    <canvas id="mc-canvas"></canvas>
										</div>
	       							</li>
	       							<li class="twelvecol">
	       								<hr/>
	       								<input th:if="${session.session_login_failed_time > 3}" type="hidden" id="mc-action" name="mc_action" th:value="@{/login}" />
	       								<input class="form-btn" th:disabled="${session.session_login_failed_time > 3}" type="submit" th:value="#{loginpage.login.login}"></input>
	       								<hr/>
	       							</li>
	       						</ul>
       						</form>
       					</div>
       				</div>
        		</div>
        		<div class="fourcol last">
        			<h2 th:text="#{loginpage.reg.title}"></h2>
        			<a href="register" th:href="@{/register.html}" class="form-btn" th:text="#{loginpage.reg.reg}"></a>
        		</div>
        	</div>
        </div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
